<script setup>
import { ref } from "vue";
const num = ref(0);
const value = ref("");
1
const options = [
  {
    value: "山东省",
    label: "山东省",
    children: [
      {
        value: "潍坊市",
        label: "潍坊市",
        children: [
          {
            value: "诸城市",
            label: "诸城市",
            children: [
              {
                value: "龙都街道",
                label: "龙都街道",
              },
              { value: "密州街道", label: "密州街道" },
            ],
          },
          {
            value: "高密市",
            label: "高密市",
          },
          {
            value: "寿光市",
            label: "寿光市",
          },
        ],
      },
      {
        value: "青岛市",
        label: "青岛市",
      },
      {
        value: "济南市",
        label: "济南市",
      },
    ],
  },
  {
    value: "江苏省",
    label: "江苏省",
    children: [
      {
        value: "淮安市",
        label: "淮安市",
        children: [
          {
            value: "洪泽区",
            label: "洪泽区",
            children: [
              {
                value: "洪泽经济开发区",
                label: "洪泽经济开发区",
              },
              { value: "老子山镇", label: "老子山镇" },
            ],
          },
          {
            value: "清河区",
            label: "清河区",
          },
          {
            value: "淮安区",
            label: "淮安区",
          },
        ],
      },
      {
        value: "南京市",
        label: "南京市",
      },
      {
        value: "徐州市",
        label: "徐州市",
      },
    ],
  },
  {
    value: "广东省",
    label: "广东省",
    children: [
      {
        value: "深圳市",
        label: "深圳市",
        children: [
          {
            value: "光明区",
            label: "光明区",
            children: [
              {
                value: "凤凰街道",
                label: "凤凰街道",
              },
              { value: "光明街道", label: "光明街道" },
            ],
          },
          {
            value: "南山区",
            label: "南山区",
          },
          {
            value: "大鹏新区",
            label: "大鹏新区",
          },
        ],
      },
      {
        value: "广州市",
        label: "广州市",
      },
      {
        value: "珠海市",
        label: "珠海市",
      },
    ],
  },
];
const activeIndex = ref("1");
</script>
<template>
  <div class="box">
    <div class="tab">
      <div class="tab-content">
        <div class="tab-left">
          <div>
            <el-icon style="color: black"><House /></el-icon>
            <span>京东首页</span>
          </div>
          <div>
            <el-icon style="color: black"><LocationFilled /></el-icon>山东
          </div>
        </div>
        <div class="tab-right">
          <el-menu
            mode="horizontal"
            :ellipsis="false"
            style="height: 40px; background-color: #e3e4e5; font-size: 10px"
          >
            <el-sub-menu index="1">
              <template #title>用户</template>
              <div style="height: 150px; width: 250px;display:flex">
                <img
                  src="https://storage.360buyimg.com/i.imageUpload/6a645f3533366438633330633064323631363133323735393230353535_mid.jpg"
                  style="width: 70px; height: 70px; border-radius: 50px"
                />
                <span style="margin-top: 100px">开通plus 平均省1012元/年</span>
              </div>
            </el-sub-menu>
            <el-menu-item index="2">我的订单</el-menu-item>
            <el-sub-menu index="3">
              <template #title>我的京东</template>
              <el-menu-item index="3-1">待处理订单</el-menu-item>
              <el-menu-item index="3-2">返修退换货</el-menu-item>
              <el-menu-item index="3-3">降价商品</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="4">
              <template #title>企业采购</template>
              <el-menu-item index="4-1">企业购</el-menu-item>
              <el-menu-item index="4-2">公共选购</el-menu-item>
              <el-menu-item index="4-3">降价商品</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="5">
              <template #title>客户服务</template>
              <el-menu-item index="5-1">帮助中心</el-menu-item>
              <el-menu-item index="5-2">在线客服</el-menu-item>
              <el-menu-item index="5-3">售后服务</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="6">
              <template #title>网站导航</template>
              <el-menu-item index="6-1">行业频道</el-menu-item>
              <el-menu-item index="6-2">生活服务</el-menu-item>
              <el-menu-item index="6-3">更多精选</el-menu-item>
            </el-sub-menu>
            <el-menu-item index="7">手机京东</el-menu-item>
            <el-menu-item index="8">网站无障碍</el-menu-item>
          </el-menu>
          <!-- </client-only> -->
        </div>
      </div>
    </div>
    <div class="title">
      <img src="../assets/QQ截图20240320085728.png" alt="" />
      <el-input
        style="
          width: 260px;
          height: 25px;
          margin-top: 20px;
          border: 2px solid #c91623;
          margin-left: 530px;
        "
      />
      <button>搜索</button>
    </div>
    <div class="goods">
      <div class="g1">全部商品</div>
      <div class="g2">
        配送至:
        <el-cascader
          v-model="value"
          :options="options"
          placeholder="选择地址"
        />
      </div>
    </div>
    <!-- <div style="width: 70%; margin: auto">
      <el-progress :percentage="num" />
      <el-input type="number" v-model="num" />
    </div> -->
  </div>
</template>

<style scoped>
</style>
<style lang="scss">
.box {
  background-color: #ffffff;
  .tab {
    margin-bottom: 20px;
    background-color: #e3e4e5;
    height: 40px;
    line-height: 40px;
    .tab-content {
      width: 65%;
      margin: auto;
      display: flex;
      justify-content: space-between;
      font-size: 13px;
      .tab-left {
        display: flex;
        justify-content: space-around;
        width: 15%;
        color: #999;
      }
      .tab-right {
        .el-sub-menu__title {
          font-size: 13px;
          color: #999;
        }
        .el-menu-item {
          font-size: 13px;
          color: #999;
          width: 80px;
        }
        .el-sub-menu {
          width: 110px;
        }
      }
    }
  }
  .title {
    width: 65%;
    margin: auto;
    display: flex;
    margin-bottom: 30px;
    img {
      width: 150px;
    }
    button {
      width: 50px;
      height: 25px;
      margin-top: 20px;
      border: 2px solid #c91623;
      background-color: #c91623;
      color: white;
      font-weight: bold;
    }
  }
  .goods {
    width: 65%;
    margin: auto;
    display: flex;
    justify-content: space-between;
    .g1 {
      font-weight: bold;
      color: #c91623;
      font-size: 16px;
    }
    .g2 {
      font-size: 13px;
    }
  }
}
</style>